@import '../../../theme/style/variables.module.less';

.container {
    width: 100%;
    height: 100%;
}

.drawer {
    z-index: 2014102315;
    max-width: 100%;

    :global {
        .ant-drawer-mask {
            backdrop-filter: blur(16px);
        }

        .ant-drawer-content-wrapper {
            border-left: 0.0625rem solid var(--mi-primary);
            max-width: 100%;

            @media only screen and (max-width: @mi-sm) {
                border-left: none;
            }
        }
    }

    &-select {
        z-index: 2014102315;
        border: 0.0625rem solid var(--mi-primary);
        .radius(6);
        .properties(margin-top);
    }
}

.action {
    width: 100%;
    position: relative;
    .properties(margin-bottom, 16);

    &-btns {
        .flex(center, flex-end);

        @media only screen and (max-width: @mi-sm) {
            .flex(flex-start, flex-start);
        }

        button + button {
            .properties(margin-left);
        }
    }

    &-items {
        .flex();
        
        > button {
            .properties(margin-right);
        }
    }
}

.input {
    &-readonly {
        &,
        input {
            cursor: pointer;
        }
    }
}

.badge {
    &-form {
        .properties(margin-top, 16);
        .properties(padding-left);
        .properties(padding-right, 16);
    }
}

.tag {
    &-text {
        color: rgba(var(--mi-rgb-on-background), 0.5);
    }
}

.btn {
    &-primary {
        background: var(--mi-primary);
        color: var(--mi-on-primary);
        border-color: var(--mi-primary);

        &:not(:disabled):focus,
        &:not(:disabled):hover {
            border-color: transparent;
            color: var(--mi-on-primary);
            background: var(--mi-primary);
        }
    }
    
    &-info {
        background: var(--mi-tertiary);
        color: var(--mi-on-tertiary);
        border-color: var(--mi-tertiary);

        &:not(:disabled):focus,
        &:not(:disabled):hover {
            border-color: transparent;
            color: var(--mi-on-tertiary);
        }
    }

    &-warn {
        background: var(--mi-error);
        color: var(--mi-on-error);
        border-color: var(--mi-error);

        &:not(:disabled):focus,
        &:not(:disabled):hover {
            border-color: transparent;
            color: var(--mi-on-error);
        }
    }
}

.tab {
    width: 100%;
    position: relative;
    .properties(margin-top, 16);

    &-radio {
        .flex(center, flex-start);
        
        &-btn {
            .flex();
        }
        
        &-text {
            .properties(margin-left, 4);
        }
    }

    &-icons {
        .grid(10, 16);
        .properties(max-height, 440);
        overflow-x: hidden;
        overflow-y: auto;
        .scrollbar();
    }
    
    &-item {
        .flex();
        .properties(width, 48);
        .properties(height, 48);
        cursor: pointer;
        .radius(8);

        :global {
            .anticon {
                .properties(font-size, 24);
            }
        }

        &-active,
        &:hover {
            background-color: var(--mi-primary);

            :global {
                .anticon {
                    color: var(--mi-on-primary);
                }
            }
        }
    }
}